<template>
  <div class="channel-edit">
    <van-cell center :border='false'>
      <div slot="title"  class="channel-title">我的频道</div>
      <van-button type="danger" plain round  size="mini" @click="isEdit = !isEdit">{{ !isEdit? '编辑': '完成' }}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item  :icon="(isEdit&&index !== 0)? 'clear': ''" :text="channel.name" class="grid-item" :class="{'active': index === active}" v-for="(channel, index) in userChannels" :key="index" @click="handleUserChannelClick(index)"/>
    </van-grid>
    <van-cell center :border='false'>
      <div slot="title" >频道推荐</div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item  :text="channel.name" class="grid-item" v-for="(channel, index) in recommendChannels" :key="index" @click="handleRecommendChannelClick(channel)"/>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannels, deleteUserChannels } from '@/api/channel'
import { setItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    userChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [], // 所有频道列表
      isEdit: false // 是否点击了编辑
    }
  },
  computed: {
    ...mapState(['user']),
    // 推荐频道
    recommendChannels () {
      // 思路: 所有频道 - 我的频道
      return this.allChannels.filter(el => {
        // flatMap和map一样
        return !this.userChannels.flatMap(uu => uu.id).includes(el.id)
      })
    }
  },
  watch: {},
  mounted () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      const { data } = await getAllChannels()
      this.allChannels = data.data.channels
    },
    // 点击推荐频道添加到我的频道
    async handleRecommendChannelClick (channel) {
      this.userChannels.push(channel)
      // TODO: 数据的持久化
      if (this.user) { // 登录了, 数据存在线上
        await addUserChannels({
          channels: [
            {
              id: channel.id,
              seq: this.userChannels.length
            }
          ]
        })
      } else { // 未登录, 存在本地中
        setItem('user-channels', this.userChannels)
      }
    },
    // 点击用户频道( 处于编辑状态, 点击删除, 否则切换频道 )
    handleUserChannelClick (index) {
      if (this.isEdit && index !== 0) {
        this.handleDeleteUserChannel(index)
      } else {
        this.handleSwitchUserChannel(index)
      }
    },
    // 点击删除用户频道
    async handleDeleteUserChannel (index) {
      if (this.active >= index) {
        this.$emit('update-active', this.active - 1)
      }

      const deleteitem = this.userChannels.splice(index, 1)

      if (this.user) { // 登录同步到线上
        await deleteUserChannels(deleteitem[0].id)
      } else { // 未登录同步到本地
        setItem('user-channels', this.userChannels)
      }
    },
    // 点击切换用户频道
    handleSwitchUserChannel (index) {
      this.$emit('close')
      this.$emit('update-active', index)
    }
  }
}

</script>
<style lang='less' scoped>
.channel-edit {
  padding-top: 54px;
  .channel-title {
    font-size: 16px;
    color: #333;
  }

  .grid-item {
    width: 83px;
    height: 43px;
    /deep/ .van-grid-item__content {
      background-color: #f4f5f6;
      .van-grid-item__text {
        font-size: 14px;
        color: #222;
        margin-top: 0;
      }
    }
    /deep/ .van-grid-item__icon {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 20px;
      color: #ccc;
    }
  }
  .active {
    /deep/ .van-grid-item__text {
      color: red !important;
    }
  }
}
</style>
